import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { Shop4Icon, VerifyIcon, UsergroupIcon } from 'tdesign-icons-react'
import { Coupon } from '@nutui/icons-react'
import { StarOutline } from 'antd-mobile-icons'
import member from '../img/精品.png'
import wallet from '../img/钱包.png'
import set from '../img/设置.png'
import '../style/fun.css'

export default function Function() {
        const [fun] = useState([
        {
            id: 1,
            title: <Link to={'/shop'} className='a'>商家入驻</Link>,
            icon: <Shop4Icon />
        },
        {
            id: 2,
            title: <Link to={'/zyh/wdmp'} className='a'>我的名片</Link>,
            icon: <VerifyIcon />,
        },
        {
            id: 3,
            title: <Link to={'/zyh/hydj'} className='a'>会员等级</Link>,
            icon: < img src={member} style={{ width: "2rem", marginTop: '.5rem' }} />
        },
        {
            id: 4,
            title: <Link to={'/zyh/zsyqm'} className='a'>专属邀请码</Link>,
            icon: <Coupon />
        },
        {
            id: 5,
            title: <Link to={'/zyh/wdsc'} className='a'>我的收藏</Link>,
            icon: <StarOutline />
        },
        {
            id: 6,
            title: <Link to={'/zyh/xtsz'} className='a'>系统设置</Link>,
            icon: < img src={set} style={{ width: "2rem", marginTop: '.5rem' }} />
        }
    ])
    return (
        <div className='fun-box'>
            {
                fun.map(item => {
                    return (
                        <div key={item.id} className='fun'>
                            <p className='icon'>{item.icon}</p>
                            <p>{item.title}</p>
                        </div>
                    )
                })
            }
        </div>
    )
}
